<template>
  <div class="fixed top-0 left-0 bg-base-100 w-full h-full z-40 ">
    <!--顶部栏-->
    <div class="fixed z-50 flex justify-center items-center w-full h-[10vh] bg-primary  text-md">
      <div class="w-2/12 md:w-1/12 flex justify-center">
        <div @click="router.go(-1)" class="">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"/>
          </svg>
        </div>
      </div>
      <div class="w-10/12 md:w-10/12 flex justify-start pl-2">
        修改用户信息
      </div>
    </div>
    <!--内容-->
    <div class="overflow-y-auto w-full h-[90vh] fixed top-[10vh] left-0">
      <div class="flex flex-col justify-center items-center w-full ">
        <div class="max-w-screen-xl w-full bg-base-100 shadow-2xl flex flex-col justify-center items-center border">
          <img class="w-40 h-40 object-cover my-6 rounded-full" :srcset="imgSrc?? user.avatar" alt="" src="">
          <input @change="imageChange()" id="file" type="file" class="file-input max-w-md file-input-bordered w-full "/>
          <div class="max-w-md w-full  text-left p-2">用户名</div>
          <input v-model="user.username" type="text" placeholder="Type here"
                 class="input input-bordered max-w-md w-full"/>
          <div class="max-w-md w-full  text-left p-2">email</div>
          <input v-model="user.email" type="text" placeholder="Type here" class="input input-bordered max-w-md w-full"/>
          <div class="max-w-md w-full  text-left p-2">手机号</div>
          <input v-model="user.phone" type="text" placeholder="Type here" class="input input-bordered max-w-md w-full"/>
          <div class="max-w-md w-full  text-left p-2">个人介绍</div>

          <div v-if="updateFlag == true"
               class="alert alert-error max-w-md w-full p-2 m-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none"
                 viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>信息保存失败，请检查网络设置</span>
          </div>
          <textarea v-model="user.remark" class="textarea textarea-bordered max-w-md w-full"
                    placeholder="Bio"></textarea>
          <div @click="editUser" class="join join-horizontal p-2 py-6">
            <button class="btn btn-primary join-item w-32">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "../plugins/router.ts";
import {onBeforeMount, ref} from "vue";
import {hook_getUser, hook_updateUser, hook_updateUserToStorage} from "../hook/UserHook.ts";
import {Qiniu_uploadFile} from "../plugins/qiniu.ts";
import {Constant} from "../hook/Constant.ts";
import {useToast} from "vue-toastification";

let user = ref()
onBeforeMount(() => {
  user.value = hook_getUser();
})


let updateFlag = ref(false)
let imgSrc = ref(null);

function imageChange() {
  let file = $('#file').prop("files")[0];
  let fileReader = new FileReader();
  fileReader.readAsDataURL(file)
  fileReader.onload = function (ev) {
    if (typeof ev.target.result === "string") {
      imgSrc.value = ev.target.result
      user.value.avatar = file;
    }
  }
}

async function editUser() {

  let newUser = _.clone(user.value);

  if (newUser.avatar instanceof File) {
    console.log("更换了头像")
    newUser.avatar = Qiniu_uploadFile(newUser.avatar, newUser.avatar.name, Constant.FOLDER_IMG)
  }

  console.log(newUser)

  let flag = false
  try {
    let data = await hook_updateUser(newUser);
    flag = data?.['flag']
    console.log(data)
  } catch (e) {
    flag = false
  }
  if (flag == true) {
    router.go(-1)
    await hook_updateUserToStorage()
    // location.reload()
    setTimeout(() => {
      useToast().success("用户信息更改成功")
    }, 1000)
  } else {
    updateFlag.value = true
    setTimeout(() => {
      updateFlag.value = false
      useToast().error("用户信息更改失败")
    }, 3000)
  }
}
</script>

<style scoped>

</style>